<template>
    <div class="state-info-header" ref="headerContainerRef">
      <div class="tabs-container">
        <div 
          v-for="(tab, index) in tabs" 
          :key="index"
          class="tab-item"
          :class="{ 'active': activeIndex === index }"
          @click="handleTabClick(tab, index)"
        >
          <span class="tab-text">{{ tab.name }}</span>
        </div>
        <div 
          class="active-background" 
          ref="activeBackgroundRef"
          :style="activeBackgroundStyle"
        ></div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'HeaderTabs',
  })
  </script>
  
  <script setup lang="ts">
  interface TabItem {
    name: string;
    key: string;
    [key: string]: any;
  }
  
  const props = defineProps({
    tabs: {
      type: Array as PropType<TabItem[]>,
      default: () => []
    },
    initialActiveIndex: {
      type: Number,
      default: 0
    }
  })
  const emit = defineEmits(['tabChange'])
  const activeIndex = ref(props.initialActiveIndex)
  const headerContainerRef = ref<HTMLElement | null>(null)
  const activeBackgroundRef = ref<HTMLElement | null>(null)
  const tabRefs = ref<HTMLElement[]>([])
  const activeBackgroundStyle = ref({
    width: '0px',
    left: '0px',
    transition: 'all 0.3s ease-in-out'
  })
  // 更新活动背景位置和宽度
  const updateActiveBackground = (index: number) => {
    nextTick(() => {
      if (!headerContainerRef.value) return
      const tabElements = headerContainerRef.value.querySelectorAll('.tab-item')
      if (tabElements.length > index) {
        const currentTab = tabElements[index] as HTMLElement
        const { offsetWidth, offsetLeft } = currentTab   
        activeBackgroundStyle.value = {
          width: `${offsetWidth}px`,
          left: `${offsetLeft}px`,
          transition: 'all 0.3s ease-in-out'
        }
      }
    })
  }
  // 处理tab点击
  const handleTabClick = (tab: TabItem, index: number) => {
    activeIndex.value = index
    updateActiveBackground(index)
    emit('tabChange', tab, index)
  }
  // 监听窗口大小变化
  const handleResize = () => {
    updateActiveBackground(activeIndex.value)
  }
  // 监听标签数组变化
  watch(() => props.tabs, () => {
    nextTick(() => {
      updateActiveBackground(activeIndex.value)
    })
  }, { deep: true })
  // 在组件挂载后初始化
  onMounted(() => {
    nextTick(() => {
      updateActiveBackground(activeIndex.value)
      window.addEventListener('resize', handleResize)
    })
  })
  
  // 组件卸载时清理
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })
  </script>
  
  <style lang="scss" scoped>
  .state-info-header {
    width: 100%;
    padding: 5px 10px;
    
    .tabs-container {
      position: relative;
      display: flex;
      align-items: center;
      background: rgba(12, 37, 71, 0.5);
      border-radius: 6px;
      padding: 4px;
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    //   border: 1px solid rgba(0, 209, 237, 0.3);
      
      .tab-item {
        position: relative;
        z-index: 2;
        flex: 1;
        text-align: center;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.3s;
        
        .tab-text {
          color: rgba(255, 255, 255, 0.7);
          font-size: 14px;
          transition: color 0.3s;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        &.active {
          .tab-text {
            color: #00d1ed;
            font-weight: 500;
            text-shadow: 0 0 5px rgba(0, 209, 237, 0.5);
          }
        }
        
        &:hover:not(.active) {
          .tab-text {
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }
      
      .active-background {
        position: absolute;
        height: calc(100% - 8px);
        top: 4px;
        left: 4px;
        z-index: 1;
        border-radius: 4px;
        background: linear-gradient(
          to bottom,
          rgba(7, 71, 134, 0.6),
          rgba(29, 37, 55, 0.8)
        );
        border: 1px solid rgba(0, 209, 237, 0.2);
        box-shadow: 0 0 15px rgba(0, 209, 237, 0.2);
        transition: all 0.3s ease-in-out;
      }
    }
  }
  
  /* 添加发光效果 */
  @keyframes pulse {
    0% {
      box-shadow: 0 0 5px rgba(0, 209, 237, 0.3);
    }
    50% {
      box-shadow: 0 0 15px rgba(0, 209, 237, 0.5);
    }
    100% {
      box-shadow: 0 0 5px rgba(0, 209, 237, 0.3);
    }
  }
  
  .active-background {
    animation: pulse 3s infinite;
  }
  </style>
